<example name="Tags Input Ng">
  <file type="html" disable-auto-size>
    <div ng-app="Example.tagsInput" ng-strict-di ng-controller="ExampleCtrl as ctrl">
      <rg-tags-input
        tags="ctrl.tags"
        x-data-source="ctrl.dataSource"
        placeholder="'Type something'"
        on-add-tag="ctrl.onAddTag"
        on-remove-tag="ctrl.removeTag"
      ></rg-tags-input>
    </div>
  </file>

  <file type="js">
    import angular from 'angular';
    import RingTagsInput from '@jetbrains/ring-ui/components/tags-input-ng/tags-input-ng';

    angular.module('Example.tagsInput', [RingTagsInput]).
      controller('ExampleCtrl', function ($q) {
        this.tags = [
          {key: 'test1', label: 'test1'},
          {key: 'test2', label: 'test2'}
        ];

        this.dataSource = ({query}) => {
          return $q.when([
            {key: 'test3', label: 'test3'},
            {key: 'test4', label: 'test4'}
          ]);
        };

        this.onAddTag = ({tag}) => {
          console.log('Add tag', tag);
        };

        this.removeTag = ({tag}) => {
          console.log('Remove tag', tag);
        };
      });
  </file>
</example>
